<template>
  <div class="main_box">
    <!-- Title -->
    <top_title :formConfig="formConfig">
      <div slot="button">
        <div style="width: 100%;display: flex;justify-content: space-between;">
          <div>
            <el-button type="primary" size="small" @click="getlist(true)">搜索</el-button>
            <el-button size="small" @click="refresh">刷新</el-button>
          </div>
          <div>
            <el-button type="primary" size="small" @click="add">新增</el-button>
          </div>
        </div>
      </div>
    </top_title>
    <!-- Table -->
    <el-card>
      <!-- <div style="padding: 10px 0">
        <el-button type="primary" size="small" @click="add">新增</el-button>
      </div> -->
      <table-list :columns="tableColumns" :tableData="group_list" :pageObj="pageObj" :loading="loading" :type="true"
        @handleCurrentChange="handleCurrentChange" @handleSelectionChange="handleSelectionChange" :btnlong="'200'"
        @switch="release">
        <template #header="slotProps">
          <!-- v-btn-key="['client:clue:update']" -->
          <el-button type="text" size="small" @click="edit(slotProps.date)">编辑</el-button>
          <el-button type="text" size="small" @click="del(slotProps.date)">删除</el-button>
        </template>
      </table-list>
    </el-card>
    <!-- 新增编辑 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="40%" :close-on-press-escape="false"
      :close-on-click-modal="false">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" :label-width="'120px'" class="demo-ruleForm"
        :label-position="'center'">
        <el-form-item label="快递名称" prop="name">
          <el-input v-model="ruleForm.name" style="width: 100%;" clearable></el-input>
        </el-form-item>
        <el-form-item label="code字符" prop="code">
          <el-input v-model="ruleForm.code" style="width: 100%;" clearable></el-input>
        </el-form-item>
        <div style="display: flex;justify-content: flex-end;">
          <el-button type="primary" size="small" @click="submitForm('ruleForm')">{{ title + '提交' }}</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  getexpresslist,
  getexpressadd,
  getexpressedit,
  getexpressdel,
} from "@/api/main/logistics";
import list from './logisticslist.json'
export default {
  name: "",
  components: {},
  data() {
    return {
      // 列表加载状态
      loading: true,
      // 
      title: "新增",
      dialogVisible: false,
      // 列表类型
      tableColumns: list.tableColumns,
      // 列表数据
      group_list: [],
      //分页参数
      pageObj: {
        size: 10,
        currentPage: 1, //前往当前页
        total: 100
      },
      // 搜索栏
      formConfig: list.formConfig,
      rules: list.rules,
      ruleForm: {
        id: "",
        name: "",
        code: "",
      },
    };
  },
  created() {
    this.getlist(true);
  },
  mounted() { },
  methods: {
    refresh() {
      this.formConfig.form.name = ""
      this.formConfig.form.create_by = ""
      this.getlist(true);
    },
    // 首次获取
    getlist(val) {
      if (val) {
        this.pageObj.currentPage = 1
      }
      this.loading = true
      let params = {
        name: this.formConfig.form.name,
        create_by: this.formConfig.form.create_by,
        page: this.pageObj.currentPage,
        page_size: this.pageObj.size
      }
      getexpresslist(params)
        .then((res) => {
          if (res.status == 1) {
            this.group_list = res.data;
            this.pageObj.total = res.total
            this.loading = false
          } else {
            this.loading = false
          }
        })
        .catch((err) => {
          this.loading = false
        });
    },
    // 新增
    add() {
      this.title = "新增"
      this.dialogVisible = true
      this.ruleForm = {
        id: "",
        name: "",
        code: "",
      }
    },
    // 
    edit(val) {
      this.title = "编辑"
      this.dialogVisible = true
      this.ruleForm = {
        id: val.id,
        name: val.name,
        code: val.code,
      }
      // getroleinfo({ id: val.id })
      //   .then((res) => {
      //     if (res.status == 1) {
      //       this.ruleForm = {
      //         id: res.data.id,
      //         name: res.data.name,
      //         code: res.data.code,
      //       }
      //       this.$message.success(res.msg);
      //     } else {
      //       this.$message.error(res.msg);
      //     }
      //   })
      //   .catch((err) => {
      //     this.$message.error(res.msg);
      //   });
    },
    del(val) {
      getexpressdel({ id: val.id })
        .then((res) => {
          if (res.status == 1) {
            this.$message.success(res.msg);
            this.getlist(true);
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(res.msg);
        });
    },
    // 信息提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let parms = {
            id: this.ruleForm.id,
            name: this.ruleForm.name,
            code: this.ruleForm.code,
          }
          if (this.ruleForm.id == "") {
            this.addrole(parms)
          } else {
            this.editrole(parms)
          }
        } else {
          return false;
        }
      });
    },
    // 新增提交
    addrole(parms) {
      getexpressadd(parms)
        .then((res) => {
          if (res.status == 1) {
            this.getlist(true)
            this.dialogVisible = false
            this.$message.success(res.msg);
          } else {
            this.dialogVisible = false
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.dialogVisible = false
          this.$message.error(res.msg);
        });
    },
    // 修改提交
    editrole(parms) {
      getexpressedit(parms)
        .then((res) => {
          if (res.status == 1) {
            this.getlist(true)
            this.dialogVisible = false
            this.$message.success(res.msg);
          } else {
            this.dialogVisible = false
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.dialogVisible = false
          this.$message.error(res.msg);
        });
    },
    // 状态修改
    release(val) {
      console.log(val, 123)
    },
    // 多选
    handleSelectionChange(val) {
      console.log(val, 123)
    },
    // 页码选择
    handleCurrentChange(val) {
      this.pageObj.currentPage = val
      this.getlist(false);
    },
  },
};
</script>

<style lang="less" scoped>
.tree_box {
  border: 1px solid #DCDFE6;
  border-radius: 5px;
  padding: 5px;
  height: 200px;
  overflow: auto;
}
</style>
